<template>
  <div>
    <Header/>
    <SideNavBar/>
    <transition name="moveCartoon" appear>

      <div style="min-height:calc(100vh - 167px)">
        <div class="pageCenter">
          <nuxt-page></nuxt-page>
        </div>
        <el-tooltip effect="dark" content="返回顶部" placement="left-start">
          <el-backtop :right="100" :bottom="100" />
        </el-tooltip>
      </div>
    </transition>
    <Footer/>
  </div>
</template>

<script setup lang="ts">
import {queryWebSiteInfo} from '@/api'
import {useStore} from "@/store";
import {useHead} from "#imports";
import {computed} from "vue";
const commonStore = useStore();
const {data,refresh}  =await queryWebSiteInfo();
if(data){
  commonStore.setWebSiteInfo(data.value.extra);
}else {
  await refresh();
  commonStore.setWebSiteInfo(data.value.extra);
}
const webConfig:any = computed(()=>commonStore.webSiteInfo.webConfig);
console.log('webConfig',webConfig)
useHead({
  title:`${webConfig.value.name}`,
  meta:[
    {name:'keywords',content:`${webConfig.value.keyword}`},
    {name:'description',content:`${webConfig.value.summary}`},
  ],
  link: [
    { rel: 'icon', href: 'https://file.qcycloud.xyz/cdedb6c096724ae1b8b34cdf54006272.png' }
  ],
})
</script>

<style scoped>
.pageCenter{
  display: flex;
  justify-content: center;
  width: 100%;
}
.moveCartoon-enter-active {
  animation: move .5s;
}

.moveCartoon-leave-active {
  animation: move .5s reverse;
}

@keyframes move {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translate(0);
  }
}
</style>
